<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/tableInfo.css" />
    <link rel="stylesheet" href="../css/studentInfo.css" />
</head>
<body>
    <div id="tableManage"></div>
    <script type="text/javascript" src="../js/common.js" ></script>
<<<<<<< HEAD
    <script type="text/babel">

        //用react封装
        var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
        //表单数据：宝贝昵称、学生姓名、设备IMEI号、设备手机号、学校名称、班级名称、学籍号、性别、生日、身高、体重、
        var tableData = [];
        //表单的最高高度、当前第几页、总页数、总行数
        var otherData = {maxHeight:'0px',currentpage:0,totlepage:0,totlerows:0,pageLeft:0,pageRight:0};
        //分页
        var Page = React.createClass({
            render: function () {
                {
                    var items = [],
                        svar = this;
                    var onPageClickArray = [this.onPageClick];
                    if(totlepage < 6){
                        for(i = 1;i <= totlepage ;i++) {
                            if (i == currentpage) {
                                items.push({num:i,checked:true})
                            } else {
                                items.push({num:i,checked:false})
                            }
                        }
                    }else if(currentpage >= (totlepage-2)) {//点在左边
                        items.push({num:1,checked:false});
                        items.push({num:'···',checked:false});
                        for(i = totlepage-2;i <= totlepage ;i++){
                            if(i == currentpage){
                                items.push({num:i,checked:true})
                            }else{
                                items.push({num:i,checked:false})
                            }
                        }
                    }else if(currentpage <= 3){
                        for(i = 1;i <= 3 ;i++) {
                            if (i == currentpage) {
                                items.push({num:i,checked:true})
                            } else {
                                items.push({num:i,checked:false})
                            }
                        }
                        items.push({num:'···',checked:false});
                        items.push({num:totlepage,checked:false})
                    }else {//点在两边
                        items.push({num:1,checked:false});
                        items.push({num:'···',checked:false});
                        items.push({num:currentpage-1,checked:false});
                        items.push({num:currentpage,checked:true});
                        items.push({num:currentpage+1,checked:false});
                        items.push({num:'···',checked:false});
                        items.push({num:totlepage,checked:false})
                    }
                }
                return (
                    <div className="tableInfo-page">
                        <div className="page-number">每页15条</div>
                        <div className="page-limit">
                            <ol className="page-limit-ol">
                                    <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)}><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}></span></li>
                                {
                                    items.map(function (item) {
                                        return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)}  className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                    })
                                }
                                <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}></span></li>
                            </ol>
                        </div>
                    </div>
                );
            }
        });
        //表单组件
        var Table = React.createClass({
            render: function () {
                return (
                    <tr>
                        <td style={{width: '8%'}}>{this.props.queryresultObjectname}</td>
                        <td style={{width: '8%'}}>{this.props.queryresultStudentname}</td>
                        <td style={{width: '12%'}}>{this.props.queryresultMdtid}</td>
                        <td style={{width: '10%'}}>{this.props.queryresultSimid}</td>
                        <td style={{width: '16%'}}>{this.props.queryresultSchoolname}</td>
                        <td style={{width: '10%'}}>{this.props.queryresultGrade}</td>
                        <td style={{width: '9%'}}>{this.props.queryresultStudentid}</td>
                        <td style={{width: '6%'}}>{this.props.queryresultSex}</td>
                        <td style={{width: '9%'}}>{this.props.queryresultSbirthday}</td>
                        <td style={{width: '6%'}}>{this.props.queryresultHeight}</td>
                        <td style={{width: '6%'}}>{this.props.queryresultWeight}</td>
                    </tr>
                );
            }
        });
        //父组件
        var Main = React.createClass({
            //组件初始状态
            getInitialState: function () {
                return {otherData:this.props.otherData,tableData:this.props.tableData}
            },
            componentDidMount: function () {
                //使用ajax取出数据然后组装数据列表
                // 然后使用this.setState();
                var height = $(document.body).height()+"px";
				$.ajax({
                    url:serverUrl+'/studentInfoManage/queryStduentList.json?param={pagenumber:1,pagecount:15}',
                    dataType:'json',
                    success:function (data) {
						for(var i=0;i<data.info.queryresult.length;i++){
							var obj=data.info.queryresult[i];
							tableData[i] = {keyid:i,queryresultObjectname:obj.objectname,queryresultStudentname:obj.studentname,queryresultMdtid:obj.mdtid,queryresultSimid:obj.simid,queryresultSchoolname:obj.schoolname,queryresultGrade:obj.grade,queryresultStudentid:obj.studentid,queryresultSex:obj.sex,queryresultSbirthday:obj.birthday=="无"?"无":obj.birthday.substr(0,10),queryresultHeight:obj.height=="无"?"":obj.height+"cm",queryresultWeight:obj.weight=="无"?"无":obj.weight+"KG"};
						}
						var pageRight = 0;
						if(data.info.totlepage > 1){
                            pageRight = 1
                        }
						otherData = {maxHeight:height,pageLeft:0,pageRight:pageRight};
						currentpage = 1,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
						this.setState({tableData:tableData,otherData:otherData});
						setTimeout(function () {
                            suixun.hideLoding();//隐藏加载中
                        },500);
                    }.bind(this)
                });
            },
            onClickQuery: function (e) {
                suixun.showLoding();//显示加载中
                var queryType = $(".school-or-table").html(),queryKey = "schoolname";
                if(queryType == "学生"){
                    queryKey = "studentname";
                }
                var param="param={";
                param = getJsonDataNotEmpty(param,""+queryKey+"",$(".queryVal").val());
                param = getJsonDataNotEmpty(param,"pagenumber","1");
                param = getJsonDataNotEmpty(param,"pagecount",'15');
                param += "}";
                $.ajax({
                    url:serverUrl+'/studentInfoManage/queryStduentList.json?'+param,
                    dataType:'json',
                    success:function (data) {
                        //alert(data.info.queryresult.length);
                        tableData = [];
                        for(var i=0;i<data.info.queryresult.length;i++)
                        {
                            var obj=data.info.queryresult[i];
                            tableData[i] = {keyid:i,queryresultObjectname:obj.objectname,queryresultStudentname:obj.studentname,queryresultMdtid:obj.mdtid,queryresultSimid:obj.simid,queryresultSchoolname:obj.schoolname,queryresultGrade:obj.grade,queryresultStudentid:obj.studentid,queryresultSex:obj.sex,queryresultSbirthday:obj.birthday=="无"?"无":obj.birthday.substr(0,10),queryresultHeight:obj.height=="无"?"":obj.height+"cm",queryresultWeight:obj.weight=="无"?"无":obj.weight+"KG"};
                        }
                        var height = $(document.body).height()+"px";
                        var pageRight = 0;
                        if(data.info.totlepage > 1){
                            pageRight = 1
                        }
                        otherData = {maxHeight:height,pageLeft:0,pageRight:pageRight};
                        currentpage = 1,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                        suixun.hideLoding();//隐藏加载中
                    }.bind(this)
                });
            },
            onPageClick: function (num) {
                //分页-调用ajac然后把数据查询出来:获取name的值
                //计算currentpage
                suixun.showLoding();//显示加载中
                var onPageLeft = 0,onPageRight = 1;
                if(num > 0){
                    currentpage = num;
                }else if(num == -1 && currentpage > 1){
                    currentpage --;
                }else if(num == -2  && currentpage < totlepage){
                    currentpage ++;
                }else{
                    return;
                }
                //修改左右的按钮
                if(currentpage == totlepage && totlepage == 1){
                    onPageLeft = 0;
                    onPageRight = 0;
                }else if(currentpage == totlepage && totlepage > 1){
                    onPageLeft = 1;
                    onPageRight = 0;
                }else if(1 < currentpage && currentpage < totlepage){
                    onPageLeft = 1,onPageRight = 1;
                }
                var queryType = $(".school-or-table").html(),queryKey = "schoolname";
                if(queryType == "学生"){
                    queryKey = "studentname";
                }
                var param="param={";
                param = getJsonDataNotEmpty(param,""+queryKey+"",$(".queryVal").val());
                param = getJsonDataNotEmpty(param,"pagenumber",""+currentpage+"");
                param = getJsonDataNotEmpty(param,"pagecount",'15');
                param += "}";
                //执行ajax获取数据然后组装
                var height = $(document.body).height()+"px";
                $.ajax({
                    url:serverUrl+'/studentInfoManage/queryStduentList.json?'+param,
                    dataType:'json',
                    success:function (data) {
                        tableData = [];
                        for(var i=0;i<data.info.queryresult.length;i++){
                            var obj=data.info.queryresult[i];
                            tableData[i] = {keyid:i,queryresultObjectname:obj.objectname,queryresultStudentname:obj.studentname,queryresultMdtid:obj.mdtid,queryresultSimid:obj.simid,queryresultSchoolname:obj.schoolname,queryresultGrade:obj.grade,queryresultStudentid:obj.studentid,queryresultSex:obj.sex,queryresultSbirthday:obj.birthday=="无"?"无":obj.birthday.substr(0,10),queryresultHeight:obj.height=="无"?"":obj.height+"cm",queryresultWeight:obj.weight=="无"?"无":obj.weight+"KG"};
                        }
                        otherData = {maxHeight:height,totlerows:400,pageLeft:onPageLeft,pageRight:onPageRight};
                        currentpage = currentpage,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                        suixun.hideLoding();//隐藏加载中
                    }.bind(this)
                });
            },
            render: function () {
                {
                    var Tabels = this.state.tableData.map(function (data) {
                        return (
                                <Table key={data.keyid}  queryresultObjectname={data.queryresultObjectname} queryresultStudentname={data.queryresultStudentname} queryresultMdtid={data.queryresultMdtid} queryresultSimid={data.queryresultSimid} queryresultSchoolname={data.queryresultSchoolname} queryresultGrade={data.queryresultGrade} queryresultStudentid={data.queryresultStudentid} queryresultSex={data.queryresultSex} queryresultSbirthday={data.queryresultSbirthday} queryresultHeight={data.queryresultHeight} queryresultWeight={data.queryresultWeight} />
                        )
                    })
                }
                return (
                        <div className="tableManage-body">
                            <header>
                                <div className="header-left">
                                    <div className="header-left-tableInfo">学生信息</div>
                                    <div className="header-left-annotationsInfo">
                                        <img src="../img/icon/annotations.png" />
                                        <span className="header-left-annotations-arrowsLeft"></span>
                                        <div className="header-left-annotations">这里是注释。</div>
                                    </div>
                                </div>
                                <div className="header-right">
                                    <div className="header-right-select" style={{borderRadius:"5px 0 0 5px"}}>
                                        <div className="school-or-table">学校</div>
                                        <span className="lower-right-corner"></span>
                                        <div className="drop-down" style={{top: "-15px"}}>
                                            <span className="select-value school-name" >学校</span>
                                            <span className="select-value student-name" >学生</span>
                                        </div>
                                    </div>
                                    <div className="header-right-query">
                                        <div className="header-right-query-input">
                                            <input className="queryVal" type="text" placeholder="请输入学校搜索"/>
                                        </div>
                                        <div className="header-right-query-img" onClick={this.onClickQuery}></div>
                                    </div>
                                </div>
                            </header>
                            <div className="tableInfo">
                                <div className="tableInfo-data">
                                    <div className="tableInfo-data-table" >
                                        <table className="head-body">
                                            <thead>
                                                <th style={{width: '8%'}}>宝贝昵称</th>
                                                <th style={{width: '8%'}}>姓名</th>
                                                <th style={{width: '12%'}}>设备IMEI号</th>
                                                <th style={{width: '10%'}}>设备手机号</th>
                                                <th style={{width: '16%'}}>学校</th>
                                                <th style={{width: '10%'}}>班级</th>
                                                <th style={{width: '9%'}}>学籍号</th>
                                                <th style={{width: '6%'}}>姓别</th>
                                                <th style={{width: '9%'}}>生日</th>
                                                <th style={{width: '6%'}}>身高</th>
                                                <th style={{width: '6%'}}>体重</th>
                                            </thead>
                                            <tbody>
                                            {Tabels}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <Page maxHeight={this.state.maxHeight} pageLeft={this.state.pageLeft} onPageRight={this.state.onPageRight} currentpage={this.state.currentpage} totlepage={this.state.totlepage} totlerows={this.state.totlerows} onPageClick={this.onPageClick} />
                            </div>
                            <footer id="copyright">
                                <span><img src="../img/icon/copyright.png"/>Copyright 2015 杭州随寻科技有限公司 </span>
                            </footer>
                        </div>
                );
            }
        });
        ReactDOM.render(
                <Main  otherData={otherData} tableData={tableData} ></Main>,
            document.getElementById('tableManage')
        );
        /*$(function () {
            $(".tableInfo-data-table").css("maxHeight",$(document.body).height()-260+"px");//直接先计算然后在虚拟dom中设置
        });*/
        //点击下拉框
        $(".header-right-select").click(function () {
            var dropDown = $(this).find('.drop-down');
            if(dropDown.is(":hidden")){
                dropDown.slideDown();
            }else{
                dropDown.slideUp();
            }
        });
        //鼠标移动函数 —— 下拉选择学校、姓名
        $('.header-right .school-or-table').hover(function(){
                if($(".drop-down").is(":hidden")){
                    $(this).parent().find('.drop-down').slideDown();
                    $(this).parent().hover(function(){},
                        function(){
                            $(this).parent().find(".drop-down").slideUp();
                        }
                    );
                }
            },function(){}
        );
        //选择学校、姓名
        $('.drop-down>span').click(function() {
            $(".queryVal").attr("placeholder","请输入"+$(this).html()+"搜索");
            $(".school-or-table").html($(this).html());
            $('.drop-down').slideUp();
        });

        $(function(){
            if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
                $('[placeholder]').focus(function() {
                    alert(111);
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                        input.removeClass('placeholder');
                    }
                }).blur(function() {
                    alert(222);
                    var input = $(this);
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.addClass('placeholder');
                        input.val(input.attr('placeholder'));
                    }
                }).blur();
            };
        })
        function placeholderSupport() {
            return 'placeholder' in document.createElement('input');
        }
    </script>
=======
    <script type="text/babel" src="../js/components/queryStduentList.js" ></script>
>>>>>>> refs/remotes/origin/developer
</body>
</html>